<template>
  <diy-container
    :status="pageStatus"
    :border-bottom="false"
    :color="pageDetail.color"
    ref="container"
    :title="pageDetail.title"
    :headerVisable="true"
    :headerBackGroudColor="pageDetail.backgroundColor"
    :headerBackgroundImage="pageDetail.backgroundImage"
    :tabbarIsShow="false"
    :isShowLeft="true"
  >
    <view class="u-nav-slot" slot="navbarLeft" @click="navigation">
      <u-icon name="arrow-left" size="19"></u-icon>
    </view>
    <view class="body">
      <view class="content-list">
        <view class="box">
          <view class="user">
            <view class="left">
              <image class="img" src="../../static/images/bgs1.png" mode="aspectFill"></image>
              <view class="center">
                <view class="name">
                  <text class="username">星星</text>
                  <text class="iconfont icon-xingbienv" style="color: rosybrown; margin-left: 10rpx"></text>
                </view>
                <view class="infos">
                  <text class="text1">28岁</text>
                  <text class="text1">本科</text>
                  <text class="text1">165cm</text>
                </view>
                <view class="number">
                  <text class="text1">会员编号：</text>
                  <text class="text2">52181472</text>
                </view>
              </view>
            </view>
            <view class="collect">收藏</view>
          </view>
          <view class="address">
            <text class="text1 iconfont icon-dizhi"></text>
            <text class="text2">目前居住地：柳州市鱼峰区(距您3.77km)</text>
          </view>
        </view>
        <view class="box">
          <view class="albumname">Ta的相册</view>
          <view class="albumlist">
            <view v-for="item in imglist">
              <image :src="item" mode="aspectFill"></image>
            </view>
          </view>
        </view>
        <view class="box">
          <view class="albumname">Ta认证</view>
          <view class="status">
            <view v-for="item in list">
              <image :src="item.img" mode="aspectFill"></image>
              <view class="title">{{ item.title }}</view>
              <view :class="item.status ? 'sta' : 'stas'">{{ item.status ? "已认证" : "未认证" }}</view>
            </view>
          </view>
        </view>

        <view class="box">
          <view class="albumname">个人资料</view>
          <view class="list-box">
            <view v-for="(item, index) in listtag" class="noselde">
              {{ item.title }}
            </view>
          </view>
        </view>

        <view class="box">
          <view class="albumname">自我介绍</view>
          <view class="introduce1">我是一个活泼开朗，风趣幽默的女生。我很真诚，希望你也是。</view>
          <view class="introduce2">爱好：音乐，电影，时尚，美食，舞蹈，球类运动</view>
          <view class="introduce3">性格：风趣幽默，活泼可爱，淳朴害羞，温柔体贴，新潮时尚，热辣性感</view>
          <view class="" style="height: 20rpx"></view>
        </view>

        <view class="box">
          <view class="albumname">理想另一半</view>
          <view class="list-box">
            <view v-for="(item, index) in listtagss" class="noselde">
              {{ item.title }}
            </view>
          </view>
        </view>
        <view class="box">
          <view class="albumname">联系方式</view>
          <view class="pitera">
            <image src="../../static/images/pitera.png" mode="aspectFill" style="width: 264rpx; height: 269rpx"></image>
          </view>
          <view style="text-align: center; font-size: 26rpx; color: #666; padding-bottom: 20rpx">
            牵线成功后可擦查看
          </view>
        </view>
      </view>
    </view>

    <view class="buy">
      <view class="left">
        <view class="customer-service" @click="toHome">
          <view class="icon iconfont icon-shouye1"></view>
          <view class="title">首页</view>
          <button plain open-type="contact"></button>
        </view>
        <view class="shopping">
          <view class="icon iconfont icon-lianxiwomen"></view>
          <view class="title">举报</view>
        </view>
      </view>

      <view class="right">
        <view class="shop" @click="thread">申请红娘牵线</view>
        <view class="buy-now">获取联系方式</view>
      </view>
    </view>
    <view class="btns"></view>
    <view class="btns1"></view>
    <view class="btns2"></view>
    <view class="btns3"></view>

    <auth ref="authRef"></auth>
  </diy-container>
</template>

<script>
export default {
  data() {
    return {
      pageDetail: {
        title: "会员详情",
        backgroundColor: "#ffffff",
        color: "rgb(51, 51, 51)",
        backgroundImage: ""
      },
      imglist: [
        "../../static/images/bgs1.png",
        "../../static/images/bgs1.png",
        "../../static/images/bgs1.png",
        "../../static/images/bgs1.png"
      ],
      listtag: [
        { selected: false, title: "武汉" },
        { selected: false, title: "现居武汉洪山区" },
        { selected: false, title: "26岁" },
        { selected: false, title: "本科学历" },
        { selected: false, title: "教师" },
        { selected: false, title: "未婚" },
        { selected: false, title: "162cm" },
        { selected: false, title: "48kg" },
        { selected: false, title: "汉族" },
        { selected: false, title: "属兔" },
        { selected: false, title: "天平座" },
        { selected: false, title: "月入4000-5000元" },
        { selected: false, title: "已经购车" },
        { selected: false, title: "已购婚房无贷款" },
        { selected: false, title: "不吸烟不喝酒" }
      ],
      listtagss: [
        { selected: false, title: "25-35岁" },
        { selected: false, title: "174-199cm" },
        { selected: false, title: "本科及以上" },
        { selected: false, title: "汉族" },
        { selected: false, title: "属兔" },
        { selected: false, title: "天平座" },
        { selected: false, title: "月入4000-5000元" },
        { selected: false, title: "已经购车" },
        { selected: false, title: "已购婚房无贷款" },
        { selected: false, title: "不吸烟不喝酒" }
      ],

      list: [
        {
          img: "../../static/images/item1.png",
          title: "实名认证",
          status: false
        },
        {
          img: "../../static/images/item2.png",
          title: "单身承诺",
          status: true
        },
        {
          img: "../../static/images/item3.png",
          title: "学历认证",
          status: false
        },
        {
          img: "../../static/images/item4.png",
          title: "房产认证",
          status: true
        }
      ]
    };
  },
  onLoad() {
    this.getDiamondData();
  },
  methods: {
    // 申请红娘牵线
    thread() {
      console.error(this.$refs.authRef);
      this.$refs.authRef.open();
    },
    toHome() {
      uni.navigateTo({
        url: "/pages/home/home"
      });
    },
    getDiamondData() {
      this.showPageContent();
    }
  }
};
</script>

<style lang="scss" scoped>
.btns {
  background-image: url("../../static/images/to.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 130rpx;
  height: 70rpx;
  position: fixed;
  bottom: 500rpx;
  right: 0;
}
.btns1 {
  background-image: url("../../static/images/share.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 88rpx;
  height: 88rpx;
  position: fixed;
  bottom: 400rpx;
  right: 0;
}
.btns2 {
  background-image: url("../../static/images/usersty.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 88rpx;
  height: 88rpx;
  position: fixed;
  bottom: 300rpx;
  right: 0;
}
.btns3 {
  background-image: url("../../static/images/dingbu.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 88rpx;
  height: 88rpx;
  position: fixed;
  bottom: 200rpx;
  right: 0;
}
.body {
  background-color: #f5f5f5;
  height: 2800rpx;
}

.content-list {
  background-image: url("../../static/images/bg5.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 412rpx;
  padding: 0 20px;
  padding-top: 40rpx;
  .box {
    background-color: #ffffff;
    padding: 20rpx 20rpx 0 20rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    .left {
      display: flex;
      .center {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          .username {
            font-size: 30rpx;
            color: #333;
          }
        }
        .infos {
          font-size: 28rpx;
        }
        .number {
          font-size: 26rpx;
          padding: 10rpx 20rpx;
          border-radius: 30rpx;
          background-color: #f9e9ff;
          color: #b960d6;
        }
      }
    }
    .collect {
      background-color: #dc95ff;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      padding: 5rpx 20rpx;
      border-radius: 30rpx;
      color: #ffffff;
    }
    .img {
      width: 148rpx;
      height: 148rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .user {
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #ededed;
      padding-bottom: 20rpx;
    }
    .address {
      padding: 20rpx 0;
      color: #666;
      font-size: 28rpx;
      .text1 {
        font-size: 26rpx;
        margin-right: 15rpx;
      }
      .text2 {
      }
    }
    .albumname {
      font-weight: 600;
    }
    .pitera {
      display: flex;
      justify-content: center;
    }
    .introduce1 {
      font-size: 28rpx;
      color: #333;
      margin: 20rpx 0;
    }
    .introduce2 {
      font-size: 24rpx;
      background-color: #f1f3fa;
      margin: 20rpx 0;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      color: #666;
    }
    .introduce3 {
      font-size: 24rpx;
      color: #666;
      // margin: 20rpx 0;
      padding: 10rpx 30rpx;
      background-color: #f1f3fa;
      border-radius: 40rpx;
    }
    .list-box {
      display: flex;
      flex-wrap: wrap;
      font-size: 26rpx;
      padding-bottom: 25rpx;
      view {
        padding: 8rpx 20rpx;
        text-align: center;
        margin-top: 20rpx;
        margin-left: 20rpx;
      }
    }

    /* 未选择 */
    .noselde {
      border: 1px solid #f7f7f7;
      background: #f7f7f7;
      color: #666;
      border-radius: 30rpx;
      font-size: 20rpx;
      padding: 0 10rpx;
    }
    .valueList {
      margin-top: 20rpx;
      padding: 20rpx;
      display: flex;
      justify-content: center;
    }
    .albumlist {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-flow: row wrap;
      margin-top: 20rpx;
      image {
        width: 190rpx;
        height: 190rpx;
        margin-bottom: 15rpx;
      }
    }
    .status {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-flow: row wrap;
      padding: 0 20rpx;
      image {
        width: 108rpx;
        height: 108rpx;
        margin-top: 40rpx;
      }
      .title {
        font-size: 28rpx;
        color: #333;
        text-align: center;
        margin-bottom: 20rpx;
      }
      .sta {
        position: absolute;
        top: 20rpx;
        margin-left: 35rpx;
        font-size: 24rpx;
        background-color: #f16a6b;
        border-radius: 20rpx;
        padding: 5rpx 10rpx;
        color: #ffffff;
      }
      .stas {
        position: absolute;
        top: 20rpx;
        margin-left: 35rpx;
        font-size: 26rpx;
        background-color: #f5f5f5;
        border-radius: 20rpx;
        padding: 5rpx 10rpx;
        font-size: 24rpx;
      }
    }
  }
}
.buy {
  position: fixed;
  bottom: 0;
  width: 690rpx;
  height: 144rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  .left {
    display: flex;
    margin-top: 20rpx;
    .customer-service {
      margin-right: 52rpx;
      .icon {
        font-size: 36rpx;
        text-align: center;
        color: #333333;
      }
      .title {
        margin-top: 6rpx;
        font-size: 20rpx;
        color: #333333;
        line-height: 28rpx;
      }
      button {
        position: absolute;
        left: 20rpx;
        bottom: 50rpx;
        width: 50rpx;
        height: 80rpx;
        border: none;
      }
    }
    .shopping {
      .icon {
        font-size: 36rpx;
        text-align: center;
        color: #333333;
      }
      .title {
        margin-top: 6rpx;
        font-size: 20rpx;
        color: #333333;
        line-height: 28rpx;
      }
    }
  }
  .right {
    display: flex;
    margin-top: 18rpx;
    .shop {
      font-size: 26rpx;
      color: #333;
      text-align: center;
      line-height: 68rpx;
      width: 238rpx;
      height: 68rpx;
      background: linear-gradient(29deg, #da86fd 0%, #ffceff 100%);
      border-radius: 50rpx;
      margin-right: 12rpx;
      font-weight: 600;
    }
    .buy-now {
      width: 260rpx;
      height: 68rpx;
      background: linear-gradient(212deg, rgb(255, 203, 203), rgb(255, 109, 153));
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #333;
      line-height: 68rpx;
      text-align: center;
      font-weight: 600;
    }
  }
}
</style>
